<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css3Layout</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<!-- 兼容 ，作用是在IE 浏览器的版本小于 IE9 时将读取 html5.js 文件 -->
	<!--[if lt IE 9]>
	  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- 国内用户使用版本，google有时候不太稳定:html5shiv -->
	<!--[if lt IE 9]>
	  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
<div class="wrap">
  <section>
  	<p>h5学习，canvas画布，只用于定义一个图形容器， 绘制图形还是需要通过js</p>
  	<article class="canvas-ul">
      <h4>canvas图形绘制学习</h4>
   	  <ul>
        <li>1.取到canvas元素document.getElementById();</li>
        <li>2.创建一个画布对象  getContext(param);  param为绘制路径、字符、形状、添加图像方法等</li>
        <li>3.fillStyle()可以定义canvas容器的背景、样式。fillRect(x,y,width,height)定义了画布的填充方式（绘制成的样子）</li>
        <li>4.路径绘制 线条起点坐标moveTo(x,y)终点坐标lineTo(x,y),绘制线条必须使用ink方法，stroke() </li>
        <li>5.圆形绘制用arc(x,y,r,start,stop)</li>
        <li>6.文本使用fillText(text,x,y)实心，strokeText(text,x,y)空心;</li>
        <li>7.渐变使用createLinearGradient(x,y,x1,y1),createRadialGradient(x,y,r,x1,y1,r1)</li>
        <li>8.图像添加drawImage(image,x,y);</li>
  	  </ul>
  	  <details>
	  	<summary>注意：</summary>
	  	<p>
	  	  Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
		</p>
  	  </details>
  	</article>
  	<canvas id="myCanvas" width="300" height="200"></canvas>	
  </section>
  <section>
  	<p>拖放学习</p>
  </section>
</div>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
header, section, footer, aside, nav, main, article, figure {  /* html5语义化元素，让旧版兼容 */
    display: block; 
}
.wrap{
	border: 10px solid transparent;
}
.canvas-ul{
	padding: 10px;
}
.canvas-ul ul li{
	line-height: 2;
	list-style: none;
}
</style>
<script type="text/javascript">
  var myCanvas = document.getElementById("myCanvas");   //取到canvas元素
  var oCan = myCanvas.getContext("2d");   //创建一个context对象  2d的图形绘制方式
  oCan.fillStyle = "#FF0000";   //
  oCan.fillRect(0,0,30,60);   //fillRect(x,y,width,height)创建坐标
  //绘制路径 开始坐标moveTo(x,y)，结束坐标lineTo()
  oCan.moveTo(3,6);
  oCan.lineTo(100,20);
  oCan.stroke();
  //绘制圆形
  oCan.beginPath();
  oCan.arc(90,90,40,0,2*Math.PI);
  oCan.stroke();
</script>
</body>
</html>